<template>
	<div class="app-wrapper">

		<div class="app-img" :style="{'background-color': colors[index % 5]}">
			<i class="iconfont" :class="app.icon"></i>
		</div>
		<div class="app-title">{{app.title}}</div>
		
		<!-- <div class="app-option">

			<div class="app-title">{{app.title}} 
				<span @mouseenter="mouseEnter" @mouseleave="mouseLeave"><i class="iconfont icon-tip"></i></span>
			</div>

			<div class="end-at" >
				<div v-if="app.inUse">
					到期时间：{{app.endAt | timeFormat}}
				</div>
			</div>

			<div class="app-btn" v-show="!added">
				<g-button round size="small" v-if="app.inUse">已添加</g-button>
				<g-button round :loading="adding" size="small" @click="buy" v-else>添加</g-button>
			</div>

		</div> -->
		
		<!-- <div class="app-info" :style="infoPosition" v-show= "showInfo">
			{{app.description}}
		</div> -->
	</div>
</template>

<script>

	import {format} from '@/utils/date'
	import GButton from '@/components/common/g-button'
	import {app as appApi} from '@/api'

	export default{

		name: 'app-wrapper',

		components: {
			GButton
		},

		data () {
			return {
				adding: false,
				showInfo: false,
				showing: '',
				infoPosition: {},
				colors: ['#4087f7', '#00BFA5', '#FDC300', '#A541DB', '#FE6D40']
			}
		},

		props: {
			app: Object,
			added: Boolean,
			index: Number,
		},

		mounted () {

		},

		activated () {
	        this.$emit( 'on-view-load' );
	    },

	    filters: {
	    	timeFormat (val) {
				return format(Number(val), 'Y-M-D');
			}
	    },

		methods: {
			async buy () {
				if (this.adding) return;

				this.adding = true;

				let name = this.app.name;
				let result = await appApi.add({name});

				if (result.data.code !=0) {
					this.$message.error('添加失败');
					this.adding = false;
					return;
				}

				this.$emit('add-app', name);
				this.adding = false;
			},

			mouseEnter (e) {
				this.showing = setTimeout(() => {

					let x = e.offsetX;
					let y = e.offsetY;

					this.infoPosition = {
						left: x - 16 + 'px',
						top: y + 26 + 'px'
					}

					this.showInfo = true;
				}, 700);
			},

			mouseLeave () {
				clearTimeout(this.showing);
				this.showInfo = false;
			}
		}
	}
</script>

<style lang="scss">

@import 'common';

.app-wrapper {
	width: 220px;
	height: 112px;
	position: relative;
    float: left;
    padding: 10px;
    display: block;

    .app-img {
    	// border: 1px solid #c7c7c7;
    	border-radius: 3px;
    	width: 60px;
    	height: 60px;
    	// float: left;
    	text-align: center;
        line-height: 58px;
        margin:  0 auto;
        
    	>i {
    		font-size: 24px;
    		color: #fff;
    	}
    }

    .app-title {
		color: $dark;
		width: 100%;
		@include text-overflow();
		text-align: center;
		font-size: fontSizeSmall;
		margin-top: 12px;
	}

    // .app-option {

    // 	float: left;
    // 	position: relative;
    // 	width: 140px;
    // 	padding: 0 0 0 8px;

    // 	.app-title {
    // 		color: $dark;
    // 		width: 118px;
    // 		@include text-overflow();
    // 		font-size: fontSizeSmall;

    // 		>span {
    // 			cursor: pointer;

    // 			>i {
    // 				font-size: 12px;
    // 				position: absolute;
    // 				top: -2px;
    // 				margin-left: 4px;
	   //  			color: $gray;
	   //  		}
    // 		}

    // 	}

    // 	.end-at {
    // 		font-size: 12px;
    // 		color: $gray;
    // 		height: 26px;
    // 		padding: 3px 0;
    // 	}

    // 	.app-btn {

    // 	}

    // }

    // .app-info {
    // 	// border: 1px solid black;
    // 	position: absolute;
    // 	background: #fff;
    // 	display: block;
    // 	width: 120px;
    // 	height: 60px;
    // 	border-radius: 3px;
    // 	padding: 4px;
    // 	font-size: 12px;
    // 	@include filter(drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5)))

    // 	&::after {
    // 		border-left: 5px solid transparent;  
		  //   border-right: 5px solid transparent;  
		  //   border-bottom: 5px solid #ffffff;  
		  //   content: "";  
		  //   position: absolute;
		  //   top: -5px;   
		  //   right: 21px;   
		  //   width: 0;  
    // 	}

    // 	&::before {
    // 		border-left: 6px solid transparent;  
		  //   border-right: 6px solid transparent;  
		  //   border-bottom: 6px solid #555555;  
		  //   content: "";  
		  //   position: absolute;
		  //   top: -6px;  
		  //   right: 20px;    
		  //   width: 0;  
    // 	}
    // }

}
	
</style>